<template>
  <footer>
    <div v-if="hitokoto" class="hitokoto-box">
      <p class="hitokoto-content">{{ hitokoto.hitokoto }}</p>
      <p class="hitokoto-from">————&nbsp;来自《{{ hitokoto.from }}》</p>
    </div>
  </footer>
</template>

<script>
import request from "@/utils/request";

export default {
  name: "Footer",
  data() {
    return {
      hitokoto: null,
    };
  },
  methods: {
    getHitokoto(interval) {
      const _this = this;
      interval = interval || 10000;
      setInterval(() => {
        fetch("https://v1.hitokoto.cn?c=a&c=b&c=c")
          .then((response) => response.json())
          .then((res) => {
            _this.hitokoto = res;
            // console.log(_this.hitokoto);
          })
          .catch((err) => {
            console.log(err);
          });
      }, interval);
    },
  },
  created() {
    this.getHitokoto();
  },
};
</script>

<style scope>
footer {
  padding: 40px 0;
  background-color: #fff;
  box-shadow: 0 -1px 10px #eee;
}
.hitokoto-box {
  min-width: 400px;
  max-width: 500px;
  margin: 0 auto;
}
.hitokoto-content,
.hitokoto-from {
  color: #333;
}
.hitokoto-from {
  text-align: right;
}
</style>
  